import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import { FormattedMessage } from 'umi/locale';
import { Row, List, Card, Switch } from 'antd';

@connect(({ devices, loading }) => ({
  devices,
  loading: loading.models.devices,
}))
class DeviceState extends PureComponent {
  componentDidMount() {
    const { dispatch, params } = this.props;
    dispatch({
      type: 'devices/fetchDeviceProps',
      payload: params.id,
    });
  }

  render() {
    const {
      devices: { props },
    } = this.props;
    return (
      <Fragment>
        <Row style={{ fontSize: 15, textAlign: 'right', marginRight: 15 }}>
          <div>
            <span style={{ marginRight: 5 }}>
              <FormattedMessage id="app.dm.devices.state.realtime.refresh" />
            </span>
            <Switch />
          </div>
        </Row>

        <List
          style={{ marginTop: 15 }}
          grid={{
            gutter: 16,
            xs: 1,
            sm: 2,
            md: 4,
            lg: 4,
            xl: 4,
            xxl: 3,
          }}
          dataSource={props}
          renderItem={item => (
            <List.Item>
              <Card style={{ magin: 10 }}>
                <p>{item.name}</p>
                <p style={{ fontWeight: 'bold' }}>
                  {item.value ? item.value : '--'} {item.unitName}
                </p>
                <p tyle={{ fontSize: 13 }}>
                  <FormattedMessage id="app.dm.devices.state.prop.range" />
                  {item.range ? item.range : '--'}
                </p>
                <p style={{ fontSize: 13 }}>
                  <FormattedMessage id="app.dm.devices.state.update.time" />
                  {item.time ? item.time : '--'}
                </p>
              </Card>
            </List.Item>
          )}
        />
      </Fragment>
    );
  }
}

export default DeviceState;
